<!DOCTYPE html>
<!--添加thymeleaf的命名空间,在当前页导入了thymeleaf库-->
<!--设置动态网页-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf解析</title>
</head>
<body>
<h3>1.thymeleaf的常规操作</h3>
<!--各种操作符的用法-->
<div class="temp" style="color: red;font-size: 20px" th:text="我是thymleaf的text"></div>
<p th:text="${'明月别枝惊鹊:'+100+'句'}"></p>
<p th:text="${200+10*6}"></p>
<!--直接获取后端传来的属性值-->
<p th:text="${tips}"></p>
<p>拿到:[[${tips}]] &ensp;[[20-120+10*2]]</p>
<p>
    <!--图片元素的路径指定-->
    <img th:src="${'/imgs/'+pic+'.jpg'}"/>
    <img th:src="@{/imgs/{t}(t=${pic}+'.jpg')}"/>
    <img src="/imgs/mm1.jpg"/>
</p>
<p>
    <a th:href="@{http://www.baidu.com}">百度一下</a>
    <!--超链接动作传参/play?msg=200-->
    <a th:href="@{/play(msg=200)}">点我一下</a>
</p>
<h4 th:text="${'姓名:'+cool.name}" style="color:red">
</h4>
<!--拿到后端的一个对象,并通过属性名取值-->
<h4 th:object="${cool}">
    <p th:text="*{id}"></p>
    <p th:text="*{name}"></p>
</h4>
<h3>2.国际化管理</h3>
<p style="color:blue;font-size: 24px" th:text="#{welcome}"></p>
<h3>3.内置变量,控制语句</h3>
<p th:if="${x=='yes'}" style="color:red">我在这里等你</p>
<p th:unless="${x=='ok'}" style="color:blue">轻轻地我走了</p>
<div th:each="str:${list}">
    <span th:text="${strStat.index}"></span>
    <span th:text="${str}"></span>
</div>
<div style="color: red" th:each="obj,stat:${list}">
    <span th:text="${stat.index}"></span>
    <span th:text="${obj}"></span>
</div>
<!--单击事件,接收后端传递的数据-->
<p class="btn" th:onclick="play()">点我吧</p>
<style>
    .btn{
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        background: blue;
        color: white;
        cursor: pointer;
    }
</style>
</body>
<script type="text/javascript">
    var btn = document.getElementsByClassName("btn")[0];
    function  play() {
        alert("你在吗")
        btn.innerText="好的";
    }
</script>
</html>